<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日派对气球游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF6B8B',
                        secondary: '#6B9FFF',
                        accent: '#FFD166',
                        background: '#FFF5F7',
                    },
                    fontFamily: {
                        comic: ['Comic Sans MS', 'cursive', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
            }
            .balloon {
                position: absolute;
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                cursor: pointer;
                transition: all 0.2s ease;
                animation: float 4s ease-in-out infinite;
            }
            .balloon::after {
                content: '';
                position: absolute;
                bottom: -10px;
                left: 50%;
                transform: translateX(-50%);
                width: 4px;
                height: 15px;
                background-color: rgba(0,0,0,0.1);
            }
            .confetti {
                position: absolute;
                width: 10px;
                height: 10px;
                opacity: 0;
            }
        }

        @keyframes float {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(5deg); }
        }

        @keyframes pop {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.5); opacity: 0.8; }
            100% { transform: scale(0); opacity: 0; }
        }

        @keyframes confetti-fall {
            0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
            100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        .bounce {
            animation: bounce 1s infinite;
        }
    </style>
</head>
<body class="bg-background min-h-screen font-comic overflow-hidden">
    <!-- 游戏标题区域 -->
    <header class="bg-gradient-to-r from-primary to-secondary text-white py-4 px-6 shadow-lg">
        <div class="container mx-auto flex justify-between items-center">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-shadow flex items-center">
                <i class="fa fa-birthday-cake mr-3 text-accent"></i>
                生日气球派对
            </h1>
            <div class="flex space-x-4 items-center">
                <div class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full flex items-center">
                    <i class="fa fa-clock-o mr-2"></i>
                    <span id="timer" class="text-xl font-bold">30</span>
                    <span class="ml-1">秒</span>
                </div>
                <div class="bg-white/20 backdrop-blur-sm px-4 py-2 rounded-full flex items-center">
                    <i class="fa fa-star mr-2 text-accent"></i>
                    <span id="score" class="text-xl font-bold">0</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 游戏主区域 -->
    <main class="relative flex-1 min-h-[calc(100vh-160px)] overflow-hidden">
        <!-- 开始屏幕 -->
        <div id="start-screen" class="absolute inset-0 bg-background/90 backdrop-blur-sm flex flex-col items-center justify-center z-50">
            <div class="text-center p-8 bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4 transform transition-all duration-300 hover:scale-105">
                <h2 class="text-[clamp(1.8rem,5vw,2.5rem)] text-primary font-bold mb-4">气球爆破!</h2>
                <p class="text-gray-700 text-lg mb-6">在时间结束前，尽可能多地戳破气球，获得高分!</p>
                <button id="start-btn" class="bg-gradient-to-r from-primary to-secondary text-white py-3 px-8 rounded-full text-xl font-bold shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-primary/50">
                    开始游戏
                </button>
                <div class="mt-6 flex justify-center">
                    <i class="fa fa-gift text-accent text-4xl animate-bounce"></i>
                </div>
            </div>
        </div>

        <!-- 游戏区域 -->
        <div id="game-area" class="hidden absolute inset-0">
            <!-- 气球会动态生成在这里 -->
        </div>

        <!-- 结束屏幕 -->
        <div id="end-screen" class="hidden absolute inset-0 bg-background/90 backdrop-blur-sm flex flex-col items-center justify-center z-50">
            <div class="text-center p-8 bg-white rounded-2xl shadow-2xl max-w-md w-full mx-4">
                <h2 class="text-[clamp(1.8rem,5vw,2.5rem)] text-primary font-bold mb-2">游戏结束!</h2>
                <p class="text-gray-700 text-xl mb-2">你的得分是:</p>
                <p id="final-score" class="text-4xl font-bold text-secondary mb-6">0</p>
                <button id="restart-btn" class="bg-gradient-to-r from-primary to-secondary text-white py-3 px-8 rounded-full text-xl font-bold shadow-lg hover:shadow-xl transform transition-all duration-300 hover:scale-105 focus:outline-none focus:ring-4 focus:ring-primary/50">
                    再玩一次
                </button>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white py-3 px-6">
        <div class="container mx-auto text-center text-sm">
            <p>祝小寿星生日快乐! 🎉</p>
        </div>
    </footer>

    <script>
        // 游戏变量
        let score = 0;
        let timeLeft = 30;
        let gameInterval;
        let balloonInterval;
        let isGameActive = false;

        // DOM 元素
        const startScreen = document.getElementById('start-screen');
        const gameArea = document.getElementById('game-area');
        const endScreen = document.getElementById('end-screen');
        const startBtn = document.getElementById('start-btn');
        const restartBtn = document.getElementById('restart-btn');
        const scoreDisplay = document.getElementById('score');
        const timerDisplay = document.getElementById('timer');
        const finalScoreDisplay = document.getElementById('final-score');

        // 气球颜色
        const balloonColors = [
            '#FF6B8B', '#6B9FFF', '#FFD166', '#06D6A0', '#118AB2',
            '#9381FF', '#FF9F1C', '#F72585', '#4CC9F0', '#70D6FF'
        ];

        // 开始游戏
        startBtn.addEventListener('click', startGame);
        restartBtn.addEventListener('click', restartGame);

        function startGame() {
            // 重置游戏状态
            score = 0;
            timeLeft = 30;
            scoreDisplay.textContent = '0';
            timerDisplay.textContent = '30';

            // 隐藏开始屏幕，显示游戏区域
            startScreen.classList.add('hidden');
            gameArea.classList.remove('hidden');
            endScreen.classList.add('hidden');

            isGameActive = true;

            // 开始倒计时
            gameInterval = setInterval(updateGame, 1000);

            // 开始生成气球
            balloonInterval = setInterval(createBalloon, 800);
        }

        function restartGame() {
            // 清除所有气球
            clearBalloons();

            // 清除所有定时器
            clearInterval(gameInterval);
            clearInterval(balloonInterval);

            // 开始新游戏
            startGame();
        }

        function updateGame() {
            timeLeft--;
            timerDisplay.textContent = timeLeft;

            // 时间到，游戏结束
            if (timeLeft <= 0) {
                endGame();
            }
        }

        function createBalloon() {
            if (!isGameActive) return;

            // 创建气球元素
            const balloon = document.createElement('div');
            balloon.classList.add('balloon');

            // 随机大小
            const size = Math.random() * 40 + 40; // 40-80px
            balloon.style.width = `${size}px`;
            balloon.style.height = `${size}px`;

            // 随机颜色
            const color = balloonColors[Math.floor(Math.random() * balloonColors.length)];
            balloon.style.backgroundColor = color;

            // 随机位置（左右）
            const leftPos = Math.random() * (window.innerWidth - size);
            balloon.style.left = `${leftPos}px`;

            // 从底部出现
            balloon.style.bottom = `-${size}px`;

            // 随机动画延迟和持续时间
            const floatDuration = Math.random() * 8 + 8; // 8-16秒
            const floatDelay = Math.random() * 2; // 0-2秒
            balloon.style.animation = `float ${floatDuration}s ease-in-out ${floatDelay}s infinite`;

            // 添加到游戏区域
            gameArea.appendChild(balloon);

            // 点击气球事件
            balloon.addEventListener('click', () => popBalloon(balloon));

            // 设定气球自动消失时间（比动画时间短一点）
            setTimeout(() => {
                if (gameArea.contains(balloon)) {
                    balloon.remove();
                }
            }, (floatDuration + floatDelay) * 1000);
        }

        function popBalloon(balloon) {
            if (!isGameActive) return;

            // 增加分数
            score++;
            scoreDisplay.textContent = score;

            // 创建爆破效果
            balloon.style.animation = 'pop 0.3s forwards';

            // 创建彩色碎片
            createConfetti(balloon.offsetLeft + balloon.offsetWidth / 2,
                          balloon.offsetTop + balloon.offsetHeight / 2);

            // 移除气球
            setTimeout(() => {
                if (gameArea.contains(balloon)) {
                    balloon.remove();
                }
            }, 300);

            // 播放爆破声音效果（简单的音效）
            playPopSound();
        }

        function createConfetti(x, y) {
            // 创建10个彩色碎片
            for (let i = 0; i < 10; i++) {
                const confetti = document.createElement('div');
                confetti.classList.add('confetti');

                // 随机颜色、大小和旋转
                confetti.style.backgroundColor = balloonColors[Math.floor(Math.random() * balloonColors.length)];
                confetti.style.width = `${Math.random() * 8 + 4}px`;
                confetti.style.height = `${Math.random() * 8 + 4}px`;
                confetti.style.left = `${x}px`;
                confetti.style.top = `${y}px`;
                confetti.style.transform = `rotate(${Math.random() * 360}deg)`;

                // 随机动画
                const fallDuration = Math.random() * 3 + 2; // 2-5秒
                const fallDelay = Math.random() * 0.5; // 0-0.5秒
                confetti.style.animation = `confetti-fall ${fallDuration}s ease-in-out ${fallDelay}s forwards`;

                // 随机动画方向
                confetti.style.animationDirection = Math.random() > 0.5 ? 'normal' : 'reverse';

                // 添加到游戏区域
                gameArea.appendChild(confetti);

                // 移除碎片
                setTimeout(() => {
                    if (gameArea.contains(confetti)) {
                        confetti.remove();
                    }
                }, (fallDuration + fallDelay) * 1000);
            }
        }

        function playPopSound() {
            // 创建简单的爆破音效
            const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
            const oscillator = audioCtx.createOscillator();
            const gainNode = audioCtx.createGain();

            oscillator.connect(gainNode);
            gainNode.connect(audioCtx.destination);

            oscillator.type = 'sine';
            oscillator.frequency.setValueAtTime(800, audioCtx.currentTime);
            oscillator.frequency.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.2);

            gainNode.gain.setValueAtTime(1, audioCtx.currentTime);
            gainNode.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.2);

            oscillator.start();
            oscillator.stop(audioCtx.currentTime + 0.2);
        }

        function endGame() {
            isGameActive = false;

            // 清除定时器
            clearInterval(gameInterval);
            clearInterval(balloonInterval);

            // 显示结束屏幕和最终得分
            finalScoreDisplay.textContent = score;
            gameArea.classList.add('hidden');
            endScreen.classList.remove('hidden');

            // 清除所有气球
            clearBalloons();
        }

        function clearBalloons() {
            const balloons = document.querySelectorAll('.balloon');
            balloons.forEach(balloon => balloon.remove());

            const confetti = document.querySelectorAll('.confetti');
            confetti.forEach(c => c.remove());
        }

        // 响应窗口大小变化
        window.addEventListener('resize', () => {
            if (!isGameActive) return;

            // 调整现有气球的位置，防止超出屏幕
            const balloons = document.querySelectorAll('.balloon');
            balloons.forEach(balloon => {
                const size = parseInt(balloon.style.width);
                let leftPos = parseInt(balloon.style.left);

                // 如果气球超出右边界，调整位置
                if (leftPos > window.innerWidth - size) {
                    leftPos = window.innerWidth - size - 10;
                    balloon.style.left = `${leftPos}px`;
                }
            });
        });
    </script>
</body>
</html>
